<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="hAdd('0', 1)"
            >添加权限</el-button
          >
        </div>
        <!-- 如果需要将表单转成树形形状的话那么这个数据里面需要有children属性 并且有一个唯一的id值(就是不同的值) -->
        <el-table border row-key="id" :data="data">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <!-- 通过分析 页面级别的type为1 按钮级别的type为2 -->
              <el-button
                type="text"
                v-if="row.type == 1"
                @click="hAdd(row.id, 2)"
                >添加</el-button
              >
              <el-button type="text" @click="hEdit(row.id)">编辑</el-button>
              <el-button type="text" @click="hDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 权限添加 -->
    <el-dialog
      :visible.sync="showDialog"
      :title="isEdit ? '编辑' : '新增'"
      @close="hClose"
    >
      <!-- 表单内容 -->
      <el-form label-width="100px" ref="from">
        <el-form-item label="权限名称">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="formData.code" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="formData.description" />
        </el-form-item>
        <el-form-item label="权限启用">
          <el-switch
            v-model="formData.enVisible"
            active-text="启用"
            active-value="1"
            inactive-text="不启用"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div style="text-align: right">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="hSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script>
// 1.导入页面请求数据接口
import { getPermissionList } from '@/api/permisson(权限管理)'
// 2.导入平面数据转树形数据的函数
import { transListToTerrList } from '@/utils/index(自定义功能函数)'
// 3.增加权限
import { addPermission, delPermission, getPermissionDetail, updatePermission } from '@/api/permisson(权限管理)'
export default {
  // 1.数据渲染
  data () {
    return {
      // (1)渲染页面数据
      data: [],
      // (2)控制添加权限的弹层
      showDialog: false,
      formData: {
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        enVisible: '0', // 开启
        pid: '', // 添加到哪个节点下
        type: '' // 类型
      },
      //(3) 编辑和新增的状态   false 为 新增 true为编辑
      isEdit: false
    }
  },
  // 2.事件
  methods: {
    // (1)请求页面数据函数
    async loadPermissionList () {
      try {
        const res = await getPermissionList()
        // 保存数据 ---> 平面数据转树形数据
        this.data = transListToTerrList(res.data)
      } catch (err) {
        console.log('getPermissionList', err)
      }
    },
    // (2)添加权限
    hAdd (pid, type) {
      /* 注意 这里的pid 和 type 如果pid为0 type为1 那么就代表是页面级别的 如果pid不为0 和 type为2 那么就是按钮级别的 */
      this.formData.pid = pid
      this.formData.type = type
      this.showDialog = true
      this.isEdit = false
    },
    // (3)确定
    hSubmit () {
      // 兜底完成
      // 发送请求
      this.isEdit ? this.doEdit() : this.doAdd()
    },
    // (4)发送请求
    async doAdd () {
      // 发送请求
      let res = await addPermission(this.formData)
      if (res.success) {
        this.$message({
          type: 'success',
          message: res.message
        })
        // 关闭弹层
        this.showDialog = false
        // 重新渲染
        this.loadPermissionList()
      }
    },
    // (5)清空表单
    hClose () {
      this.$refs.from.resetFields()
      this.formData = {
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        enVisible: '0', // 开启
        pid: '', // 添加到哪个节点下
        type: '' // 类型
      }
    },
    // 删除
    hDel (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await delPermission(id)
          // 删除成功的提示
          if (res.success) {
            this.$message({
              type: 'success',
              message: res.message
            })
            // 重新刷新页面
            this.loadPermissionList()
          }
        } catch (err) {
          console.log('delPermission', err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑
    hEdit (id) {
      // 显示弹层
      this.showDialog = true
      // 修改编辑状态
      this.isEdit = true
      // 发送请求
      this.loadPermissionDetail(id)
    },
    // 编辑请求
    async doEdit () {
      // 数据回填
      // 发送请求
      let res = await updatePermission(this.formData)
      // 关闭弹层
      this.showDialog = false
      // 重新渲染
      this.loadPermissionList()
    },
    // 数据回填
    async loadPermissionDetail (id) {
      try {
        let res = await getPermissionDetail(id)
        // 数据回填
        this.formData = { ...res.data }
      } catch (error) {
        console.log(error)
      }

      // this.formData = res.data
    }

  },
  // 3.页面执行函数
  created () {
    // (1)执行页面数据函数
    this.loadPermissionList()
  }

}
</script>
<style>
</style>